<template>
  <div>
    <Category :disabled="type!==0"/>
    <el-card
        shadow="always"
        :body-style="{ padding: '20px' }"
        style="margin-top: 30px"
    >
      <SpuList v-if="type === 0" @changeType="changeType"/>
      <SpuForm v-if="type === 1" :spuInfo="spuInfo" @changeType="changeType"/>
      <SkuForm v-if="type === 2" :spuInfo="spuInfo" @changeType="changeType"/>
    </el-card>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "Spu",
});
</script>

<script setup lang="ts">
import {ref} from "vue";
import SpuList from "./components/SpuList/index.vue";
import SpuForm from "./components/SpuForm/index.vue";
import SkuForm from "./components/SkuForm/index.vue";
import type {SpuInfoType, SpuItemType, spuSaleAttrListType, spuSaleImgItemType} from "@/api/spu";
import useCategoryStore from "@/stores/category";
import {storeToRefs} from "pinia";

// 获取 cateStore对象
const cateStore = useCategoryStore()

// 解构出 3 id
const {categoryList3Id} = storeToRefs(cateStore)

// 控制当前展示的组件  0 代表Spu列表页 1 代表添加和修改Spu页 2 代表Sku添加页面  三者共用一个组件
const type = ref(0);

// 用来保存 修改组件或者添加组件的值
const spuInfo = ref<SpuInfoType>({
  category3Id: categoryList3Id.value as number,  //所在的第三级分类id
  description: "",  //当前新增的spu的描述
  spuImageList: null, //当前spu的图片列表
  spuName: '',  //当前的spu名称
  spuSaleAttrList: null, //当前spu的销售属性列表
  tmId: 0, //当前所在的品牌id
})

// 控制当前展示的组件函数显示隐藏
const changeType = (newType: number, row: SpuItemType) => {
  type.value = newType;
  if (row) {  // 修改  需要回显数据
    spuInfo.value = row;
  } else {  // 添加  只需要一个用于绑定数据 的模板就行
    spuInfo.value = {
      category3Id: categoryList3Id.value as number,
      description: "",
      spuImageList: [],
      spuName: '',
      spuSaleAttrList: [],
      tmId: 0,
    }
  }
}

</script>

<style scoped></style>
